SSRとServer componentsの違い

SSRとServer Componentsは直交した概念

SSR

server上でrenderingまで済まして、その結果を返している

HTMLを返却している

初期表示のみに関係がある

2回目以降のrenderingは、clientで行われる

Server Components

Server Componentsは、JSON化したJSXをstreamで返却する

Component Treeを作ってから返すわけではない

client上ではrenderingされない

再renderingが必要な際は、serverからrefetchすることになる

一部のみを更新するので、clientの状態は保持し続けられる

bundleサイズを小さくできる

server components自体はbundleに含まれない

結果のJSXだけが返却される

clientで使わないlibraryのJSサイズを減らせる

併用した時のイメージ

https://gyazo.com/e63a7a9edb7ee6284cf9b5c168811cd6 https://github.com/dai-shi/waku

初回のリクエスト (左側)

RSC serverは、JSON化したJSXを返却

それを受け取ったSSR serverが、そこでclient componnentも含めてrenderingする

renderingした結果をbrowserに返す

2回目以降のリクエスト (右側)

2回目以降はSSR serverは関係ないので、通常のRSCと同じ

JSON化したJSXをbrowserに返す

併用して、何が嬉しい？

初回アクセスした時に完全なHTMLが返ってくるか、徐々に返ってくるかの違いがある

その方が嬉しい、という状況がある？